<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<link rel="stylesheet" href="/jeefast/mb/elementui-lib/lib/index.css">
		<link rel="stylesheet" href="/jeefast/mb/css/common.css">
		<title>生化指标管理</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14">
				生化指标管理
			</div>
			<div class="pd10">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="项目">
						<div class="bioche-project">
							<span v-for="(item,index) in tagsArr" :class="{active:tagsIndex == index}" @click="changeTags(item,index)">{{item.projName}}</span>
						</div>
					</el-form-item>
					<el-form-item>
						<el-input v-model="formInline.employeesNo" type="text" placeholder="按编号查询"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search">查询</el-button>
					</el-form-item>
				</el-form>
				<el-table :data="tableData" stripe border style="width: 100%">
					<el-table-column prop="patient_id" label="患者编号"></el-table-column>
					<el-table-column prop="pat_name" label="患者姓名"></el-table-column>
					<el-table-column prop="res_name" label="研究组"></el-table-column>
					<el-table-column prop="doctor_name" label="调研医生"></el-table-column>
					<el-table-column prop="step_name" label="调研阶段"></el-table-column>
					<el-table-column prop="state" label="调研状态">
						<template slot-scope="scope">
							<span v-if="scope.row.state == 0">未上传</span>
							<span v-else>已上传</span>
							<!-- {{({"0":"未上传","1":"已上传"}[scope.row.state])}} -->
						</template>
					</el-table-column>
					<el-table-column prop="update_time" label="更新日期">
						<template slot-scope="scope">
							<span v-if="scope.row.state == 0"></span>
							<span v-else>{{scope.row.update_time}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="countImg" label="文件数">
						<template slot-scope="scope">
							<span v-if="scope.row.state == 0"></span>
							<span v-else>{{scope.row.countImg}}</span>
						</template>
					</el-table-column>
					<el-table-column label="识别结果">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row)" type="text" size="medium" v-if="scope.row.state != 0">查看详情</el-button>
						</template>
					</el-table-column>
					<el-table-column label="审核状态">
						<template slot-scope="scope">
							<span v-if="scope.row.state == 1"><el-button type="text" size="medium">审核中</el-button></span>
							<span v-if="scope.row.state == 3"><el-button type="text" size="medium" style="color:#67c23a;">已通过</el-button></span>
							<el-popover
								v-if="scope.row.state == 2"
								placement="top-start"
								title="审核失败原因:"
								width="240"
								trigger="hover"
								:content="scope.row.reason">
								<el-button slot="reference" type="text" size="medium" style="color:#F56C6C;">未通过</el-button>
							</el-popover>
							<el-button @click="handleEdit(scope.row)" size="medium" class="ml10" v-if="scope.row.state != 0">修改</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<div class="bottomstate">
					<el-pagination class="f-r mt5" background @current-change="handleCurrentChange" :current-page="page" :page-size="limit" layout="total,prev, pager, next,jumper"
					 :total="total" :hide-on-single-page="true"></el-pagination>
				</div>
			</div>
		</div>
	</body>

	<script src="/jeefast/mb/elementui-lib/lib/vue.js"></script>
	<script src="/jeefast/mb/elementui-lib/lib/index.js"></script>
	<script src="/jeefast/mb/js/jquery-1.9.1.min.js"></script>
	<script src="/jeefast/mb/js/axios.js"></script>
	<script src="/jeefast/mb/js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {					
					tagsIndex: 0,
					tagsArr: [],
					formInline: {
						employeesNo: "", // 按工号、姓名查询
					},
					tableData: [],
					total:0,
				}
			},
			methods: {
				// 切换项目
				changeTags: function(item, index) {
					this.tagsIndex = index;					
					localStorage.setItem('projName',item.projName)
				},
				// 项目列表
				getProjList: function() {
					projList({}).then(res => {
						if (res.data.code == 0) {
							this.tagsArr = res.data.data;
							localStorage.setItem('projName',res.data.data[0].projName)
						}
					})
				},
				// 搜索
				search:function() {
					this.page = 1;
					this.getTable();
				},
				// 查看详情
				handleClick:function(row){
					localStorage.setItem('resName',row.res_name)
					window.location.href = 'biochemicalManageCont.html?data_id='+row.data_id;//此处拼接内容
				},
				handleEdit:function(row){
					localStorage.setItem('resName',row.res_name)
					window.location.href = 'biochemicalManageCont.html?data_id='+row.data_id;//此处拼接内容;//此处拼接内容
				},
				// 用户管理 接口
				getTable: function() {
					let that = this;
					researchDataDetail({
						page: that.page, //起始页面
						limit: that.limit, //每页显示个数
						id:that.formInline.employeesNo
					}).then(res => {
						if (res.data.code == 0) {
							that.tableData = res.data.data;
							for(let i =0;i<that.tableData.length;i++){
								that.tableData[i].pat_name = this.arrMap(that.tableData[i].pat_name.split(','))
							}
							that.total = res.data.count;
						}
					})
				},
				arrMap:function(arr){
					var arr = arr
					var reg = /(?<=.)./g;
					arr = arr.map(function(item) {
						return item.replace(reg, '*');
					})
					return arr
				},
				// 分页
				handleCurrentChange: function(currentPage) {
					this.page = currentPage;
					this.getTable()
				},
			},
			created() {
				this.getTable();
				this.getProjList()
			},
		});
	</script>
</html>
